/* 该文件存放多个页面都需要使用的公共样式 */

/* 一般写浏览器 要先清楚浏览器的默认样式 :使用通配符选择器*/
 * {
    /* 外边距 */
    margin: 0; 
    /* 内边距  */
    padding: 0;
    /* 边框和内边距尺寸不会撑大盒子 */
    box-sizing: border-box;
 }

 /* 如果想要给整个页面设置背景，就需要给body标签设置背景！
 那么就需要让body标签先撑满浏览器窗口！ */
html {
    /* 设置html的高度和其父元素浏览器一样高 */
    height: 100%;
}

 body {
    /* 当前的body并不是铺满整个浏览器窗口的 */
    /* body宽度和浏览器一样宽，但是高度并没有有浏览器那么高，所以进行设置 */
    
    /* 设置body的高度和其父元素html一样高 */
    height: 100%;

    /* .. 是回到当前目录的上一级目录，这里也就是blogSystem目录
    （因为当前目录是css） */
    /* 不用加引号！！ */
    background-image: url(../img/dali.jpg);
    /* 设置位置垂直、水平居中 */
    background-position: center center;
    /* 设置不重复出现 */
    background-repeat: no-repeat;
    /* 设置尺寸：尽量伸展开 */
    background-size: cover;
}

.nav {
    /* 导航栏高度普遍都是50px */
    height: 50px;
    /* 注意0就是全透明的，1就是完全不透明的 */
    background-color: rgba(50,50,50,0.4);
    /* 文字颜色 */
    color: white;
    /* 弹性布局 */
    display: flex;
    /* 水平方向靠左布局 */
    justify-content: flex-start;
    /* 竖直方向居中对齐 */
    align-items: center;
}

/* 设置头像大小 */
.nav img {
    width: 40px;
    height: 40px;
    /* 添加左右页边距 */
    margin-left: 30px;
    margin-right: 10px;
    /* 设置圆形:半径设置为尺寸的一半！！ */
    border-radius: 20px;
}

.nav .spacer {
    /* 设置成百分比的形式其实就是：以父元素为基准来设置当前的尺寸 */
    width: 70%;
}

/* 需要对超链接进行设置：去掉下划线、加间距、该颜色 */
.nav a {
color: white;
/* 去掉下划线 */
/* 所谓的文本装饰就是：上划线、下划线、删除线，设为none就是全都没有 */
text-decoration: none;
/* 设置内边距：上下0 左右边10 */
/* 内边距可以让点击的有效区域大一些 */
padding: 0 10px;
}


/* 版心样式设置 */
.container {
    width: 1000px;
    /* 设置版心水平居中 */
    margin: 0 auto;
    /* 设置版心高度：整个页面-导航栏 */
    /* 100% 表示父元素高度 */
    /* 减号两侧务必有一个空格，不能没有！！为了和CSS中的脊柱命名法进行区分 */
    height: calc(100% - 50px);

     /* div会换行，所以使用弹性布局使得在同一行上 */
     display: flex;
     /* 设置两个模块中间有间隙 */
     justify-content: space-between;
}

.container .container-left {
    height: 100%;
    width: 200px;
    /* background-color: red; */
}

.container .container-right {
    height: 100%;
    width: 796px;
    /* background-color: blue; */
    background-color: rgba(255,255,255,0.8);
    /* 加上内边距 */
    padding: 20px;
    /* 加上圆角 */
    border-radius: 20px;

    /* 加上一个滚动条，使得博客很多的时候是在该区域内滚动而不溢出 */
    /* 如果内容超出范围就是自动添加滚动条 */
    overflow: auto;
}


/* 设置左边卡片样式 */
.card {
    background-color:rgba(255,255,255,0.8);
    /* 设置内边距：为了使得文字图片不要顶着边界 */
    padding: 30px;
    /* 设置圆角矩形，不要太锋利 */
    border-radius: 20px;
}

/* 左卡片中的头像进行调整 */
.card img {
    /* 因为后面要设为头型头像，所以需要正方形 */
    width: 140px;
    height: 140px;
    border-radius: 70px;
}

/* 调整用户名样式 */
.card h3 {
    /* 文字居中 */
    text-align: center;
    /* 四周各10个像素 */
    padding: 10px;
}

/* 调整链接 */
.card a {
    /* 会发现设置文字居中没有用，是因为a是行内元素，默认尺寸就是和内容是一样的，所以文字居中没有效果。
    需要先转成块级元素 */
    display: block;

    text-align: center;
    color: #999;
    text-decoration: none;

    /* 给上下加点内边距 */
    padding: 10px 0;
}

/* 调整文章及分类 */
.card .counter {
    /* 为了后期能够水平排列，使用弹性布局 */
    display: flex;
    /* 设置水平均分间距（两边也有） */
    justify-content: space-around;
    /* 再设置一点内边距 */
    padding: 5px;
}